<template>
    <div class="remarks-box">
        <div :class="[iscollapse ? 'close' : '']">{{ contents }}</div>

        <p class="arrow" @click="toggle" v-if="iscollapse">
            <van-icon name="arrow-down" />
        </p>
        <p class="arrow" @click="toggle" v-else>
            <van-icon name="arrow-up" />
        </p>
    </div>
</template>

<script>
export default {
    props: {
        contents: {
            type: String,
        },
    },
    name: "Remarks",
    data() {
        return {
            iscollapse: true,
        };
    },
    mounted() {},
    methods: {
        toggle() {
            this.iscollapse = !this.iscollapse;
        },
    },
};
</script>

<style lang="less" scoped>
.remarks-box {
    padding: 20px 20px 10px;
    background: #ea4f4f;
    width: 100vw;
    div,p {
        color: #fff;
        font-size: 24px;
        line-height: 34px;
        word-wrap: break-word;
    }
    .arrow {
        text-align: center;
        padding: 5px 0 0;
    }
    .close {
        display: block;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
</style>
